let echarts = require('echarts/lib/echarts')
let elementResizeDetectorMaker = require("element-resize-detector")

export default {
  ybpEchart: function (id, data) {
    let option = {
      series: [
        {
          type: 'gauge',
          center: ['50%', '60%'],
          startAngle: 210,
          endAngle: -30,
          min: 0,
          max: 100,
          splitNumber: 10,
          itemStyle: {
            color: '#FFAB91',
          },
          progress: {
            show: true,
            width: 12
          },
          pointer: {
            show: false
          },
          axisLine: {
            lineStyle: {
              width: 12
            }
          },
          axisTick: {
            distance: -20,
            length: 2,
            splitNumber: 5,
            lineStyle: {
              width: 0.5,
              color: '#999'
            }
          },
          splitLine: {
            distance: -24,
            length: 6,
            lineStyle: {
              width: 1,
              color: '#999'
            }
          },
          axisLabel: {
            distance: -10,
            color: '#999',
            fontSize: 8,
          },
          anchor: {
            show: false
          },
          title: {
            show: false
          },
          detail: {
            valueAnimation: true,
            width: '80%',
            lineHeight: 30,
            borderRadius: 8,
            offsetCenter: [0, '-5%'],
            fontSize: 18,
            fontWeight: 'bolder',
            formatter: '{value} °C',
            color: 'inherit'
          },
          data: [
            {
              value: data
            }
          ]
        },
        {
          type: 'gauge',
          center: ['50%', '60%'],
          startAngle: 210,
          endAngle: -30,
          min: 0,
          max: 100,
          itemStyle: {
            color: '#FD7347'
          },
          progress: {
            show: true,
            width: 3
          },
          pointer: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          detail: {
            show: false
          },
          data: [
            {
              value: data
            }
          ]
        }
      ]
    };

    let chartDom = echarts.getInstanceByDom(document.getElementById(id))
    if (chartDom == undefined) {
      chartDom = echarts.init(document.getElementById(id));
    }

    chartDom.setOption(option)

    window.addEventListener('resize', () => {
      chartDom.resize()
    })
    let erd = elementResizeDetectorMaker();
    erd.listenTo(document.getElementById(id), function (element) {
      chartDom.resize()
    })
    return chartDom
  },
}
